<template>
  <div class="home">
    <p style="color: #fba320">
      <i class="el-icon-s-promotion" style="font-size: 24px"></i>
      地产分类
    </p>
    <el-card class="page-wrap">
      <el-table :data="realList">
        <el-table-column width="180px" label="地产图标">
          <template v-slot="{ row }">
            <img :src="row.image" alt="" class="picture" />
          </template>
        </el-table-column>
        <el-table-column label="地产类型" prop="title"></el-table-column>
        <el-table-column label="地产介绍" prop="desc"></el-table-column>
        <el-table-column label="操作" type="primary" width="120px">
          <template v-slot="{ row }">
            <el-button type="primary" size="small" @click="show(row.id)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center" style="margin-top: 30px">
        <el-pagination
          background
          :total="total"
          layout="prev, pager, next"
          :page-size="pageConfig._limit"
          @current-change="currentChange"

        >
        </el-pagination>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getEstateList, getEstateNumber } from "@/api/sort";
export default {
  data() {
    return {
      realList: [],
      pageConfig: {
        _limit: 2,
        _start: 0,
      },
      total: 0,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      this.realList = await getEstateList(this.pageConfig);
      // console.log(this.realList);
      this.total = await getEstateNumber();
      console.log(this.total);
    },
    currentChange(page) {
      this.pageConfig._start = (page - 1) * this.pageConfig._limit;
      this.getList();
    },
    show(id) {
      this.$router.push({ path: "/list", query: { id: id } });
    },
  },
};
</script>

<style scoped>
.home {
  width: 60%;
  height: 800px;
  margin: 20px auto;
}

.page-wrap {
  margin-top: 30px;
  /* height: 600px; */
}

.picture {
  width: 180px;
  height: 180px;
}
</style>
